<template>
	<view class="container">
		<text v-if="transform != 'translateY(0)'" class="secret-info">旧浪博客由lzzy.soft制作</text>
		<view class="welcome-box" :style="welcomeStyle" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			<image class="icon-login" src="../../static/icons/icon.png" mode="aspectFill"></image>
			<text class="info-welcome">WELCOME!</text>
			<text class="info-welcome-zh">欢迎来到旧浪news</text>
		</view>
		<view class="info-avatar" @click="clickChooseImage">
			<image class="user-avatar" :src="userAvatar" mode="aspectFill"></image>
			<text class="input-holder">{{avatarName}}</text>
		</view>
		<view class="info-nick">
			<textarea auto-height value="" placeholder="请输入昵称" placeholder-class="input-holder" id="nick" @input="inputGet"></textarea>
		</view>
		<view class="info-email">
			<textarea auto-height value="" placeholder="请输入邮箱" placeholder-class="input-holder" id="email" @input="inputGet"></textarea>
		</view>
		<view class="info-user">
			<textarea auto-height value="" placeholder="请输入用户名" placeholder-class="input-holder" id="user" @input="inputGet"></textarea>
		</view>
		<view class="info-pwd">
			<input v-if="isPwd" type="password" :value="password" placeholder="请输入密码"
				placeholder-class="input-holder" id="password" @input="inputGet" />
			<input v-else type="text" :value="password" placeholder="请输入密码" placeholder-class="input-holder"
				id="password" @input="inputGet" />
			<text :class="isPwd ? 'iconfont icon-mima ic-pwd' : 'iconfont icon-mima ic-pwd'"
				@click="clickSwitch"></text>
		</view>
		<view @click="register" class="register-btn">
			<text>注册</text>
		</view>
	</view>
</template>

<script>
import { title } from 'process'
	let startY = 0
	export default {
		data() {
			return {
				isPwd:true,
				password:"",
				nick:"",
				email:"",
				user:"",
				userAvatar:"../../static/icons/default_user.png",
				transform:"translateY(0)",
				transition:"",
				avatarName:"请点击图片上传"
			}
		},
		computed:{
			welcomeStyle: function(){
				return{
					'transform': this.transform,
					'transition': this.transition
				}
			}
		},
		methods: {
			checkValid(){
				if(this.nick.length == 0){
					this.nick = this.user
				}
				if(!this.$util.checkLen(this.user,1,"用户名")){
					return false
				}
				if(!this.$util.checkLen(this.password,6,"密码")){
					return false
				}
				if(!this.$util.checkLen(this.email,6,"邮箱")){
					return false
				}
				let regex = /^[A-Za-z0-9\u4e00-\u9fa5]+@[A-Za-z0-9_-]+(\.[A-Za-z0-9_-]+)+$/
				if(!regex.test(this.email)){
					uni.showToast({
						title:'电子邮箱格式不合法！',
						icon:'error'
					});
					return false
				}
				if(this.avatarName == "请点击图片上传" || this.avatarName.length == 0){
					uni.showToast({
						title:'请上传图片',
						icon:'error'
					});
					return false
				}
				return true
			},
			inputGet(e){
				let id = e.currentTarget.id
				this[`${id}`] = e.detail.value
			},
			clickChooseImage(){
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					sourceType:['album'],
					success: res =>{
						let path = res.tempFilePaths[0]
						uni.showLoading({
							title:"上传图片...",
							mask:false
						});
						let url = this.$params.host + this.$params.action_upload
						this.$req.postFile(url,"file",path,{},res =>{
							let json = JSON.parse(res.data)
							this.avatarName = json.data
							this.userAvatar = this.$params.host + this.avatarName
						},()=>{
							uni.hideLoading()
						})
					}
				})
			},
			register(){
				if(!this.checkValid()){
					return
				}
				uni.showLoading({
					title:'提交注册中...',
					mask:false
				});
				let data = {
					"avatar":this.avatarName,
					"email":this.email,
					"nick_name":this.nick,
					"password":this.password,
					"user_name":this.user
				}
				let url = this.$params.host + this.$params.action_register
				this.$req.post(url,data,res =>{
					uni.showToast({
						title:res.data.message
					});
					if(!res.data.success){
						return
					}
					let app = getApp()
					let json = res.data.data
					app.globalData.avatar = json.avatar
					app.globalData.uid = json.id
					app.globalData.nickName = json.nickName
					app.globalData.userName = json.userName
					app.globalData.token = json.token
					app.globalData.email = json.email
					app.globalData.type =json.type
					console.log(app.globalData);
					uni.navigateBack()
				},()=>{
					uni.hideLoading()
				})
			},
			clickSwitch() {
				this.isPwd = !this.isPwd
			},
			touchStart(e){
				startY = e.touches[0].clientY
			},
			touchMove(e){
				let distance = e.touches[0].clientY -startY
				if(distance <= 0){
					return
				}
				this.transform = `translateY(${distance}rpx)`
			},
			touchEnd(e){
				this.transform = 'translateY(0)'
				this.transition ="transform 330ms linear"
			}
		}
	}
</script>

<style>
	@import url("register.css");
</style>
